<template>
  <el-form style="margin-top: 5px;"
    ref="expendPropertyForm"
    class="rk-compact-form rk-form"
    :model="form"
    :rules="formRules"
    label-width="100px">
    <el-row class="mb20">
      <el-col :span="12">
        <el-form-item label="业务类型"
          prop="busiType">
          <el-input v-model="form.busiType"
            placeholder="请输入业务类型" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="业务描述"
          prop="remark">
          <el-input v-model="form.remark"
            placeholder="业务描述" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row class="mb20">
      <el-col :span="12">
        <el-form-item label="业务数据表"
          prop="busiTable">
          <el-input v-model="form.busiTable"
            placeholder="业务数据表" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="业务表id字段"
          prop="busiTableId">
          <el-input v-model="form.busiTableId"
            placeholder="业务表id字段" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row class="mb20">
      <el-col :span="24">
        <el-form-item label="关键字"
          prop="keyword"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 21 }">
          <el-input v-model="form.keyword"
            placeholder="关键字" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row class="mb20">
      <el-col :span="12">
        <el-form-item label="分类一"
          prop="classify1">
          <RkTreeSelect v-model="form.classify1"
            :showCode="false"
            placeholder="请选择分类一"
            :props="{ label: 'code',value: 'code' }"
            :server="{
                url: '/fileRuleInfo/getClassification',
                method: 'post',
                data: { fileName: 'classify1' }
              }">
          </RkTreeSelect>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="分类二"
          prop="classify2">
          <RkTreeSelect v-model="form.classify2"
            :showCode="false"
            placeholder="请选择分类二"
            :props="{ label: 'code',value: 'code' }"
            :server="{
                url: '/fileRuleInfo/getClassification',
                method: 'post',
                data: { fileName: 'classify2' }
              }">
          </RkTreeSelect>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row class="mb20">
      <el-col :span="12">
        <el-form-item label="分类三"
          prop="classify3">
          <RkTreeSelect v-model="form.classify3"
            :showCode="false"
            placeholder="请选择分类三"
            :props="{ label: 'code',value: 'code' }"
            :server="{
                url: '/fileRuleInfo/getClassification',
                method: 'post',
                data: { fileName: 'classify3' }
              }">
          </RkTreeSelect>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import XEUtils from 'xe-utils'
/** 默认表单数据 */
let expendForm = reactive({
  busiTable: undefined,
  busiTableId: undefined,
  busiType: undefined,
  classify1: undefined,
  classify2: undefined,
  classify3: undefined,
  classify4: undefined,
  classify5: undefined,
  keyword: undefined,
  remark: undefined
})
const props = defineProps({
  // 回显的表单数据
  expendModel: {
    type: Object, default: () => { }
  },
  model: {
    type: String,
    default: ''
  },
})
const expendPropertyForm = ref('')
const form = ref(XEUtils.clone(expendForm, true))

/** 修改表单数据回显 */
const loadForm = async () => {
  const echoForm = props.expendModel
  let newFormData = {}
  for (let key in expendForm) {
    const newKey = (XEUtils.isNull(echoForm[key]) || XEUtils.isUndefined(echoForm[key])) ? expendForm[key] : echoForm[key]
    newFormData[key] = XEUtils.clone(newKey, true)
  }
  form.value = {
    ...newFormData
  }
}

const formRules = reactive({
  busiType: [{ required: true, message: '请输入业务类型', trigger: 'blur' }],
  classify1: [{ required: true, message: '请选择分类一', trigger: 'change' }]
})

/** 表单校验 */
const validateForm = async () => {
  let resValid = false
  await expendPropertyForm.value.validate((valid, failCol) => {
    resValid = valid
  })
  return resValid
}

/** 重置表单 */
const resetForm = () => {
  expendPropertyForm.value.resetFields()
  expendPropertyForm.value.clearValidate()
  // 重新赋值
  form.value = XEUtils.clone(expendForm, true)
}
/** 请求获取信息 */
const getFormData = () => {
  const { busiType } = props.expendModel
  expendForm.busiType = busiType
  let resultData = {}
  for (let key in form.value) {
    resultData[key] = Reflect.ownKeys(expendForm).includes(key) ? form.value[key] : ''
  }
  return resultData
}

defineExpose({
  validateForm,
  resetForm,
  loadForm,
  getFormData
})
</script>

<style lang="scss" scoped>
</style>